<template>
	<el-steps :active="step" finish-status="success" simple style="margin:20px;background-color: aliceblue;">
		<el-step title="服务基本信息" @click="step = 1" />
		<el-step title="字段确定" @click="step = 2" />
		<el-step title="过滤条件" @click="step = 3" />
		<el-step title="信息确认" @click="step = 4" />
	</el-steps>
	<el-form :model="form" label-width="120px" style="width: 80%;" v-if="step == 1">
		<el-form-item label="服务名称">
			<el-input v-model="form.name" />
		</el-form-item>
		<el-form-item label="服务功能描述">
			<el-input v-model="form.desc" type="textarea" />
		</el-form-item>
		<el-form-item label="服务分组">
			<el-select v-model="form.group" placeholder="请选择分组">
				<el-option v-for="(item, index) in groups" :key="index" :label="item.name" :value="item.name" />
			</el-select>
		</el-form-item>
		<el-form-item label="服务所在数据源">
			<el-select v-model="form.datasource" placeholder="请选择数据源">
				<el-option v-for="(item, index) in datasource_list" :key="index" :label="item" :value="item" />
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="step += 1">下一步</el-button>
		</el-form-item>
	</el-form>
	<div v-else-if="step == 2">
		<el-form :model="form" label-width="120px" style="width: 80%;">
			<el-form-item label="返回字段" style="margin-bottom:8px;align-content:center">
				<div v-for="n in param_num" style="display: flex;width: 100%;">
					<el-autocomplete v-model="form.params[n - 1]" :fetch-suggestions="querySearch" clearable
						style="padding-right: 10px;padding-bottom: 10px;width:200px" placeholder="请输入字段关键词" />
					<el-button type="warning" :icon="Minus" size="small" circle plain
						style="position: relative;top: 4px;" @click="onDelete(1, n)" />
					<el-button type="success" :icon="Plus" size="small" circle plain
						style="position: relative;top: 4px;" @click="onAdd(1)" v-if="n == param_num" />
				</div>
			</el-form-item>
			<el-form-item label="条件过滤字段">
				<div v-for="n in filter_num" style="display: flex;width: 100%;">
					<el-autocomplete v-model="form.filter[n - 1]" :fetch-suggestions="querySearch" clearable
						style="padding-right: 10px;padding-bottom: 10px;width:200px" placeholder="请输入字段关键词" />
					<el-button type="warning" :icon="Minus" size="small" circle plain
						style="position: relative;top: 4px;" @click="onDelete(2, n)" />
					<el-button type="success" :icon="Plus" size="small" circle plain
						style="position: relative;top: 4px;" @click="onAdd(2)" v-if="n == filter_num" />
				</div>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSearchSchema">查询服务生成方案</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" border style="width: 80%;margin:0 20px;" v-if="isSearched">
			<el-table-column label="选择" width="100">
				<template #default="scope">
					<el-radio-group v-model="radio">
						<el-radio :label="scope.$index">{{ '方案' + (scope.$index + 1) }}</el-radio>
					</el-radio-group>
				</template>
			</el-table-column>
			<el-table-column prop="date" label="参数一所在表" />
			<el-table-column prop="name" label="参数二所在表" />
			<el-table-column prop="address" label="参数三所在表" />
		</el-table>
		<el-form-item style="margin: 30px 120px;">
			<el-button type="primary" @click="step += 1">下一步</el-button>
			<el-button @click="step -= 1">上一步</el-button>
		</el-form-item>
	</div>
	<el-form :model="form" label-width="120px" style="width: 80%;margin-top: 20px;" v-else-if="step == 3">
		<el-form-item v-for="item in form.condition" :label="item.name">
			<el-select v-model="item.operator" style="width: 60px;" placeholder="">
				<el-option v-for="option in operators[item.type]" :label="option" :value="option" />
			</el-select>
			<el-switch v-model="item.isConstant" active-text="动态参数" inactive-text="静态参数" style="margin:0 20px" />
			<el-space wrap v-if="!item.isConstant" style="width: 60%;">
				<el-input v-model="item.value[0]" placeholder="input value" style="width: 30%;" />
				<el-input v-if="item.type == 'date'" v-model="item.value" placeholder="input value"
					style="width: 30%;" />
			</el-space>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="step += 1">下一步</el-button>
			<el-button @click="step -= 1">上一步</el-button>
		</el-form-item>
	</el-form>
	<el-descriptions title="服务信息确认" v-else style="margin: 0 20px;" border>
		<template #extra>
      <el-button type="primary" @click="onSubmit" style="position:relative;right:10px;">提交</el-button>
    </template>
		<el-descriptions-item label="服务名称"></el-descriptions-item>
		<el-descriptions-item label="服务功能描述"></el-descriptions-item>
		<el-descriptions-item label="服务分组"></el-descriptions-item>
		<el-descriptions-item label="服务所在数据源">
		</el-descriptions-item>
		<el-descriptions-item label="返回字段">
			</el-descriptions-item>
			<el-descriptions-item label="过滤条件">
		</el-descriptions-item>
	</el-descriptions>
	<!-- <el-dialog v-model="sumbit_ready" title="服务信息确认">
		<el-table :data="submit_list" style="position:relative;bottom:20px;">
			<el-table-column property="label" label="属性" width="150" />
			<el-table-column property="value" label="Name" width="200" />
		</el-table>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="sumbit_ready = false">取消</el-button>
				<el-button type="primary" @click="onSubmit">
					提交
				</el-button>
			</span>
		</template>
	</el-dialog> -->
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { Plus, Minus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { Success } from '../../util/message';
import Api from '../../util/axios'

const step = ref(1)
const form = reactive({
	name: '',
	params: [''],
	filter: [''],
	group: '',
	datasource: '',
	desc: '',
	sql: '',
	condition: [
		{ name: '身份证号', type: 'string', operator: '=', isConstant: false, value: [] },
		{ name: '进入时间', type: 'date', operator: '~', isConstant: false, value: [] },
		{ name: '省份', type: 'string', operator: '=', isConstant: false, value: [] },
	]
})
const param_num = ref(1);
const filter_num = ref(1);
const router = useRouter()
const groups = reactive<any[]>([])
const param_list = reactive<any[]>([])
const datasource_list = reactive<any[]>([])

onMounted(() => {
	Api.post('/get_group').then((res: any) => {
		groups.push(...res)
	})
	Api.post('/get_lable').then((res: any) => {
		res.forEach(element => {
			param_list.push({ value: element })
		});
	})
	Api.post('/show_datasource').then((res: any) => {
		res.forEach(element => {
			datasource_list.push(element.name)
		});
	})
})

const querySearch = (queryString: string, cb: any) => {
	const createFilter = (queryString: string) => {
		return (item) => {
			return (
				item.value.indexOf(queryString) != -1
			)
		}
	}
	const results = queryString
		? param_list.filter(createFilter(queryString))
		: param_list
	// call callback function to return suggestions
	cb(results)
}
const onAdd = (type) => {
	if (type == 1) {
		param_num.value++
		form.params.push('')
	} else {
		filter_num.value++
		form.filter.push('')
	}

}
const onDelete = (type, index) => {
	if (type == 1) {
		form.params.splice(index - 1, 1)
		param_num.value--
	} else {
		form.filter.splice(index - 1, 1)
		filter_num.value--
	}

}

const isSearched = ref(false)
const tableData = [
	{
		date: 'datasource1',
		name: 'datasource1',
		address: 'datasource1',
	},
	{
		date: 'datasource2',
		name: 'datasource2',
		address: 'datasource2',
	}
]
const radio = ref(0)
const onSearchSchema = () => {
	isSearched.value = true
}

const operators = reactive({
	string: ['=', '!='],
	date: ['~']
})


const sumbit_ready = ref(false)
const submit_list = reactive<any[]>([])
const onCreate = () => {
	console.log(form.condition[0].value);

	// sumbit_ready.value = true
	// let temp = []
	// for (const key in form) {
	// 	submit_list.push({ label: key, value: form[key] })
	// }

}
const onSubmit = () => {
	Success('创建成功')
	router.push({ name: 'service' })
}
</script>